<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>背景不包括边框</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    .parent1 {
        background-color: thistle;
        height: 100%;
    }

    .child1 {
        background-color: white;
        border: 10px dashed hsla(0, 0%, 100%, 0.5);
        height: 100px;
        background-clip: content-box; /* 关键：加上后背景会不包括边框和padding */
    }
</style>

<body>
    <div class="parent1">
        <div class="child1"></div>
    </div>
</body>
<script type="text/javascript">
</script>

</html>